<template>
  <div>
    <div class="list-btn">
      <Button type="primary" @click="editItem('/work/apEdit','add')">添加</Button>
      <Button type="error" @click="deleteAll" style="margin-right: 20px;">删除</Button>
      <Select clearable style="width:200px" v-model="params.name" placeholder="AP类型名称">
        <Option v-for="item in nameList" :value="item.vendorId" :key="item.id">{{ item.name }}</Option>
      </Select>
      <Button type="primary" @click="getList(url,'refresh')">搜索</Button>
      <Button type="success" class="refresh-btn" @click="getList(url,'refresh')">刷新</Button>
    </div>
    <page-list :listTitle="listTitle" :list="list" :loading="loading" @selectItem="ids = $event;"></page-list>
    <page-button :current="params.pageCurrent"  :total="total" @changePageNum="params.pageNum = $event; getList(url)" @changePageSize="params.pageSize = $event; getList(url)"></page-button>
    <confirm-dialog :show="showModal" @confirm="deleteItem('/aptype/delete')" @cancel="showModal.isShow = false"></confirm-dialog>
  </div>
</template>

<script>
  // import listMixin from '../../../mixin/list'
  import pageList from '../template/listTemplate'
  import pageButton from '../template/pageBtnTemplate'
  import confirmDialog from '../template/confirmDialogTemplate'
  export default {
    // mixins:[listMixin],
    components: {
      pageList,
      pageButton,
      confirmDialog
    },
    data () {
      return {
        nameList:[],
        tag: {
          'title': '用户列表',
          'path': '/work/user/userList'
        },
        listTitle: [
          {
            type: 'selection',
            width: 50,
            align: 'center',
          },
          {
            title: '品牌',
            width: 60,
            key: 'vendorName',
            align:'left',
          },
          {
            title: 'AP型号',
            key: 'model',
            width:80,
            align:'center'
          },
          {
            title: '最大接入终端个数',
            key: 'maxTerminalNum',
            width:160,
            align:'center'
          },
          {
            title: '最高速率（Mbps）',
            key: 'maxSpeed',
            width:140,
            align:'center'
          }, {
            title: '支持网络协议',
            key: 'supportProtocolss',
            width:140,
            align:'center'
          }, {
            title: '支持频率（GHz）',
            key: 'supportFrequency',
            width:140,
            align:'center'
          }, {
            title: '功率（w）',
            key: 'power',
            width:100,
            align:'center'
          }, {
            title: '长度（cm）',
            key: 'length',
            width:110,
            align:'center'
          },
          {
            title: '宽度（cm）',
            key: 'width',
            width:110,
            align:'center'
          },{
            title: '高度（cm）',
            key: 'height',
            width:110,
            align:'center'
          },
          {
            title: '备注',
            key: 'comment',
            align:'center'
          },
          {
            title: '操作',
            key: 'action',
            width: 150,
            align: 'center',
            fixed: 'right',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.editItem('/work/apEdit', 'edit', this.list[params.index])
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.showModal.isShow = true;
                      this.ids = this.list[params.index].id;
                    }
                  }
                }, '删除')
              ]);
            }
          }
        ],
        url: '/aptype/page',
        nameListUrl: '/aptype/list',
        params: {
          name: '',
          nameList: [],
          pageNum: 1,
          pageSize: 15
        },

      }
    },

    mounted(){
      this.$store.commit('changeTag', this.tag.path);
      this.$store.commit('openPage', this.tag);
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .list-btn{
    margin-bottom: 20px;
  }
  .refresh-btn{
    float: right;
  }

</style>
